<!--
 * @Description: 计算器-公共头部
  * @Version: 1.0
 * @Autor: chenwg
 * @Date: 2024-01-16 19:11:31
 * @LastEditors: chenwg
 * @LastEditTime: 2024-01-16 19:11:31
-->
<template>
  <jy-card class="moduleHeader">
    <div class="topHead">
      <span>{{ title }}</span>
      <div class="topRight" v-if="rightType == 'complex'">
        <span>债券代码</span>
        <div class="bond-com">
          <bond-box
            :defaultValue="bondData.bondCode"
            @change="changeCode($event)"
            @changeValue="changeValue($event)"
          ></bond-box>
        </div>

        <div class="flex-style">
          <span>交易面额</span>
          <div style="width: 78px">
            <jy-select
              v-model="faceValue"
              placeholder="请选择"
              filterable
              size="mini"
            >
              <jy-option
                v-for="item in faceValueOpts"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </jy-option>
            </jy-select>
          </div>
        </div>
        <div class="flex-style">
          <span>计算对象</span>
          <div style="width: 78px">
            <jy-select
              v-model="caclTarget"
              placeholder="请选择"
              filterable
              size="mini"
            >
              <jy-option
                v-for="item in caclTargetOpts"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </jy-option>
            </jy-select>
          </div>
        </div>

        <div class="flex-style">
          <span>资金成本</span>
          <div style="width: 78px">
            <jy-select
              v-model="fundsCost"
              placeholder="请选择"
              filterable
              size="mini"
            >
              <jy-option
                v-for="item in fundsCostOpt"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </jy-option>
            </jy-select>
          </div>
          <!-- <span>+</span> -->
          <!-- <span>BP</span> -->
        </div>

        <jy-checkbox v-model="taxchecked">考虑税费</jy-checkbox>
        <!-- <jy-button @click="showTax"
          ><i class="Gildata-setup" slot="left"></i>税费设定</jy-button
        > -->
        <!-- <jy-button
          no-border
          icon="Gildata-resetSelected2"
          @click="clearStock"
          title="清空"
        ></jy-button> -->
      </div>
      <div class="topRight" v-else-if="rightType == 'medium'">
        <!-- <jy-button><i class="Gildata-calculate" slot="left"></i>计算</jy-button> -->
        <jy-button @click="saveResult" icon="Gildata-keep"
          >保存试算结果</jy-button
        >
      </div>
      <div v-else-if="rightType == 'easy'">
        <jy-button
          no-border
          icon="Gildata-resetSelected2"
          @click="clearStock"
          title="清空"
        ></jy-button>

        <!-- <jy-button
          no-border
          icon=" Gildata-download2"
          @click="downLoad"
          title="导出"
        ></jy-button> -->
      </div>
    </div>
    <tax-box ref="taxBox" @getTax="getTax"></tax-box>
    <slot></slot>
  </jy-card>
</template>

<script>
import taxBox from './taxBox.vue'
import bondBox from '@/components-gildata/selectCode/bondBox'
export default {
  components: {
    taxBox,
    bondBox,
  },
  props: {
    title: {
      type: String,
      default: '',
    },
    rightType: {
      type: String,
      default: 'complex',
    },
  },
  data() {
    return {
      treeData: [],
      bondData: {
        bondCode: '',
        bondAbbr: '',
      },
      code: 'R007',
      taxchecked: false,
      ifChecked: false,
      faceValue: '',
      faceValueOpts: [
        {
          labal: '10000',
          value: '10000',
        },
      ],
      caclTarget: '',
      caclTargetOpts: [
        {
          labal: '持有收益',
          value: '持有收益',
        },
      ],
      fundsCost: '',
      fundsCostOpt: [
        {
          labal: 'FR001',
          value: 'FR001',
        },
        {
          labal: 'FR007',
          value: 'FR007',
        },
        {
          labal: 'FDR001',
          value: 'FDR001',
        },
        {
          labal: 'FDR007',
          value: 'FDR007',
        },
        {
          labal: 'SHIBOR3M',
          value: 'SHIBOR3M',
        },

        {
          labal: 'LPR5Y',
          value: 'LPR5Y',
        },
      ],
    }
  },
  watch: {
    taxchecked(val) {
      console.log('%c Line:92 🥐', 'color:#ed9ec7', this.code)
      this.$emit('taxChecked', val, this.code)
    },
  },
  methods: {
    // 税费设定弹窗
    showTax() {
      this.$refs.taxBox.showdialog()
    },

    // 是否勾选了列表项
    getChecked(val) {
      this.ifChecked = val ? true : false
    },
    // 清空质押券
    clearStock() {
      this.$emit('clearStock')
    },

    // 保存试算结果
    saveResult() {
      this.$emit('saveResult')
    },
    // 获取回购代码
    getReturnCode() {
      //
    },
    // 回购代码选中事件
    getCode(val) {
      this.code = val
      this.$emit('getCode', val)
    },
    downLoad() {
      this.$emit('downLoad')
    },
    // 反选回购代码
    setCode(code) {
      this.code = code
    },
    // 税费设定刷新
    getTax() {
      this.$emit('getTax')
    },
    changeValue(val) {
      if (!val && val !== 0) {
        this.bondData.bondCode = ''
        this.bondData.bondAbbr = ''
        this.$emit('refreshCode', this.bondData, 'code')
      }
    },
    changeCode(val) {
      this.bondData.bondCode = val.gilcode
      this.bondData.bondAbbr = val.secuabbr
      this.$emit('refreshCode', this.bondData, 'code')
    },
  },
}
</script>

<style lang="less" scoped>
.moduleHeader {
  margin-bottom: 12px;
  .topHead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--c-border-line);
    margin-top: 10px;
    padding-bottom: 6px;
    margin-bottom: 12px;
    > span {
      color: rgba(0, 0, 0, 0.88);
      font-family: PingFang SC;
      font-size: 16px;
      font-weight: 600;
    }
    .topRight {
      display: flex;
      align-items: center;
      > span {
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;
        margin-right: 6px;
        font-weight: 600;
      }
      .jy-button,
      .jy-checkbox {
        margin-left: 20px;
      }
    }
  }
  .bond-com {
    padding: 0 10px;
  }

  .flex-style {
    display: flex;
    align-items: center;
    span {
      margin-left: 5px;
      margin-right: 5px;
    }
  }
}
</style>
